<template>
  <div class="app-container">
    <!-- 搜索--------------------------------- -->
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>{{$t('common.filterSearch')}}</span>
        <el-button
          style="float: right"
          @click="fetchData()"
          type="primary"
          size="small"
        >
          {{ $t('common.search') }}
        </el-button>
      </div>
      <div style="margin-top: 25px">
        <el-form :inline="true" size="small" label-width="140px">
          <el-form-item :label="$t('articlelist.search.id')">
            <el-input
              style="width: 203px"
              v-model="searchObj.articleId"
              :placeholder="$t('articlelist.search.plid')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('articlelist.search.name')">
            <el-input
              style="width: 230px margin-left"
              v-model="searchObj.title"
              :placeholder="$t('articlelist.search.plname')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('articlelist.search.type')">
            <el-input
              style="width: 203px margin-left"
              v-model="searchObj.type"
              :placeholder="$t('articlelist.search.pltype')"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- --------------------------------- -->
      <!--导入按钮 -->
    <el-button type="primary" @click="importData">
      <i class="fa fa-plus" />{{ $t('common.import') }}
    </el-button>
    <!-- 导出按钮 -->

     <el-button type="primary" @click="exportData" style="margin-left:10px"
            > {{ $t('common.export') }}</el-button
          >

    <!-- 添加-------------------------------- -->
    <div align="right">
      <el-button type="success" @click="addArticle" icon="el-icon-plus"
        >{{$t('common.add')}}</el-button
      >
    </div>
    <!-- 批量删除 -->
    <div>
      <el-button type="danger" size="mini" @click="removeRows()">{{ $t('common.bulkDelete') }}</el-button>
    </div>
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column align="center"  :label="$t('articlelist.table.articleId')">
        <template slot-scope="scope">
          {{ scope.row.articleId }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('articlelist.table.author')" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.author }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('articlelist.table.title')" align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('articlelist.table.type')">
        <template slot-scope="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('articlelist.table.label')" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.label }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column :label="$t('articlelist.table.image')" width="180" align="center">
        <template slot-scope="{ row, $index }">
          <img :src="row.image" alt="" style="width: 150px; height: 100px" />
        </template>
      </el-table-column>

      <el-table-column :label="$t('articlelist.table.createTime')" align="center">
        <template slot-scope="scope">
          <span style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block"  >
          {{ dateFormat(scope.row.createTime) }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('common.operate')"
        align="center"
        width="300"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="info"
            size="mini"
            icon="el-icon-view"
            @click="showDetail(scope.row)"
            >{{ $t('common.see') }}
          </el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="editArticle(scope.row.articleId)"
          >
            {{ $t('common.update') }}
          </el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="delArticle(scope.row.articleId)"
          >
            {{ $t('common.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 导入 -->
    <el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px">
      <el-form label-position="right" label-width="170px">
        <el-form-item label="文件">
            <el-upload
              :action="'http://42.194.159.131:8080/article/addAritcles'"
               :headers="headers"
              :on-success="onUploadSuccess"
              :multiple="false"
              class="upload-demo"
              >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过500kb</div>
            </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImportVisible=false">取消</el-button>
      </div>
    </el-dialog>
    <!-- ----------------------------------分页 -->
    <div class="block" style="float: right; margin-top: 20px">
      <!-- <span class="demonstration">显示总数</span> -->
      <el-pagination
        background
        @current-change="fetchData"
        :current-page.sync="page_num"
        :page-size="page_size"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- --------------------------------------- -->
    <!-- ---------------------------------------查看对话框-->
    <el-dialog title="查看文章" :visible.sync="dialogFormVisible" >
      <el-form style="width: 80%" :model="detail" disabled>
        <el-form-item label="文章名称" label-width="100px">
          <el-input autocomplete="off" v-model="detail.title"></el-input>
        </el-form-item>
        <el-form-item label="作者" label-width="100px">
          <el-input autocomplete="off" v-model="detail.author"></el-input>
        </el-form-item>
        <el-form-item label="文章类型" label-width="100px">
          <el-input autocomplete="off" v-model="detail.type"></el-input>
        </el-form-item>
        <el-form-item label="来源" label-width="100px">
          <el-input autocomplete="off" v-model="detail.source"></el-input>
        </el-form-item>
         <!-- 上传图片 -->
      <el-form-item label="考试图片" label-width="100px">
        <img
            v-if="detail.image"
            :src="detail.image"
            style="width: 150px; height: 100px"
          />
      </el-form-item>

         <el-form-item label="发布时间" label-width="100px">
          <el-date-picker
          v-model="detail.createTime"
          type="datetime"
          placeholder="选择日期时间"

        >
        </el-date-picker>
        </el-form-item>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="detailarticle"
          >确 定</el-button
        >
      </div> -->
    </el-dialog>
    <!-- --------------------------------------- -->
  </div>
</template>
<script>
import healarticle from "@/api/healthyarticle";
export default {
  data() {
    return {
      list: [], //列表条件封装对象
      page_num: 1,
      page_size: 8, //每8个数据一页
      total: 1, //初始化
      searchObj: {}, //条件封装对象
      dialogFormVisible: false, //对话框（查看）
      imageUrl:'',//上传图片所要的属性
      multipleSelection: [], //批量选择中选择的记录列表
      dialogImportVisible:false,//弹框
      detail:{

      }
    };
  },
  //在页面渲染前执行
  //调用methods定义的方法，得到数据
  created() {
    this.fetchData();
  },
  methods: {
     //导入数据字典
    importData(){
      this.dialogImportVisible = true
    },
     //上传成功调用
    onUploadSuccess(){
        this.dialogImportVisible = false
        this.fetchData(1);
        this.$message({
        	  message: '导入数据成功!',
        	  type: 'success'
          })
    },
    //导出数据字典
    exportData(){
      window.location.href="http://42.194.159.131:8080/article/exportData"
    },
    //获取选择复选框的id值
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
     //批量删除
    removeRows(){
         this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //遍历数组得到每个id值，设置到idList里面
          var idList = []
          for(var i =0;i< this.multipleSelection.length;i++){
            var obj =  this.multipleSelection[i];
            var id = obj.articleId
            idList.push(id)
          }
          //调用接口
          healarticle.batchRemoveArticle(idList).then((resp) => {
            //提示
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            console.log('aaaaaaaaaa',resp.message);
            //刷新页面数据
            this.fetchData(1);
          })
          .catch(()=>{
          
          this.$message({
            type: "error",
            message: "删除失败!权限不足，请联系管理员进行升级",
          });
        
       })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
   //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
  dateFormat:function(time) {
    var date=new Date(time);
    var year=date.getFullYear();
    /* 在日期格式中，月份是从0开始的，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
    // 拼接
    return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
},
//-----------------------------------------------------------------

    //添加文章
    addArticle() {
      this.$router.push("/HealthyArticle/addarticle");
    },
    //编辑文章
    editArticle(articleId) {
      console.log('aaaaaaaaaa',articleId);
      this.$router.push("/HealthyArticle/editarticle/" + articleId);
    },
    //页面列表页渲染，请求接口调用
    fetchData(page = 1) {
      this.page_num = page;
      var vm = this;
      healarticle.getHealthyarticleList(this.page_num, this.page_size, this.searchObj)
        //请求成功调用
        .then( (res) =>{
          vm.list = res.data.Article.list;
          vm.total = res.data.Article.total;
        })
        .catch((error) => {});
    },
    // 删除方法------------------
    delArticle(articleId) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //调用接口
          healarticle.delarticle(articleId).then((resp) => {
            //提示
            console.log('123123',resp);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            
            //刷新页面数据
            this.fetchData(1);
          })
          .catch(()=>{
          
          this.$message({
            type: "error",
            message: "删除失败!权限不足，请联系管理员进行升级",
          });
        
       })
         
        })
        .catch(() => {
          
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          
        });
    },
    // --------------------------------------------
    // 搜索查询方法-------------------------------
    searchArticleList(articleId) {
      var vm = this;
      this.axios({
        method: "GET",
        url: "/article/id?articleId=" + articleId,
      })
        .then(function (resp) {
          if (resp.data.errorCode == 0) {
            vm.$message({
              message: "查找成功!",
              type: "success",
            });
            var searchList = [];
            searchList.push(resp.data.data.article);

            vm.list = searchList;
            //vm.fetchData()// 更新商品列表
          }
        })
        .catch(function (error) {
          vm.$message.error("查找失败");
          console.log(error);
        });
    },
    // -------------------------------------------------
    //查看文章
    showDetail(row) {
      this.dialogFormVisible = true;
      console.log('aaaaaaaaaaaa',row);
       this.detail = { ...row };
    },
    detailarticle(){
         this.dialogFormVisible = false;
          let result =  healarticle.reqdetailArticle(this.detail);
          console.log('sdasdasd',result);
          console.log('aaaaaaaaaaaaaaaaaa',result);
          if(result.errorCode ==0){
             this.$message({
            type: "success",
            message: "查看文章成功",
          });
          this.fetchData(this.Topic.choiceId ? this.page_num : 1); // 更新商品列表
          }
        },

    // -------------------------------------------------
  },
};
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
